<template>
  <div class="dash-container-index">
    <div class="c-width c-height c-hidden c-flex c-dis-flex-col">
      <div class="c-width c-dis-flex-row c-hidden"  style="height: 40%;">
        <div class="c-flex c-height c-dis-flex-col c-hidden">
          <div class="c-flex c-dis-flex-col c-hidden d-cont-wrap-none">
            <div class="d-title"><span></span>统计总览</div>
            <div class="d-body c-flex c-hidden d_total_all">
              <ul>
                <li v-for="(item,i) in totalAll" :key="i">
                  <p>{{item.name}}</p>
                  <span>{{item.value || 0}}</span>
                </li>
              </ul>
            </div>
          </div>
          <div class="c-flex c-dis-flex-col c-hidden d-cont-wrap-none">
            <div class="d-title"><span></span>快捷入口</div>
            <div class="d-body c-flex c-hidden d_module_activity">
              <ul class="c-height">
                <li v-for="(item,i) in activityList" :key="i" @click="getActivityList(i)">
                  <div class="li_img" >
                    <el-image :src="getImgUrl(item.icon + '.png')" ></el-image>
                  </div>
                  <div class="li_cont">
                    <span>{{item.name}}</span>
                    <p>{{item.cont}}</p>
                  </div>
                </li>
              </ul>
            </div>
          </div>
        </div>
        <div class="c-height c-dis-flex-col c-hidden d-cont-wrap d-cont-wrap-none" style="width: 35%;">
          <div class="d-title"><span></span>系统公告</div>
          <div class="d-body notice_list">
            <ul>
              <li v-for="(item,i) in NoticeList.slice(0,4)" :key="i">
                <p>{{item.noticeTitle}}</p>
                <span>{{item.createTime | formatDate}}</span>
              </li>
            </ul>
          </div>
        </div>
      </div>
      <div class="c-width c-dis-flex-row c-hidden c-flex">
        <div class="c-flex c-dis-flex-row c-height c-hidden">
          <div class="c-flex c-dis-flex-col c-hidden d-cont-wrap">
            <div class="d-title"><span></span>进行中的考试</div>
            <div class="d-body">
              <el-table  :data="tableData1" style="width: 100%" height="100%">
                <el-table-column prop="data1"  label="考试名称" :show-overflow-tooltip="true">
                  <template slot-scope="scope">
                    <span class="c-table-span-link">{{scope.row.examName}}</span>
                  </template>
                </el-table-column>
                <el-table-column prop="examInProgress"  label="正在考试"  width="80" align="center"></el-table-column>
                <el-table-column prop="examPeople"  label="考完人数"  width="80" align="center"></el-table-column>
              </el-table>
            </div>
          </div>
          <div class="c-flex c-dis-flex-col c-hidden d-cont-wrap">
            <div class="d-title"><span></span>考试总览</div>
            <div class="d-body c-dis-flex-col c-hidden">
             <div class="c-width c-flex c-dis-flex-col c-hidden">
              <lineCharts :chart-data="lineData1"></lineCharts>
             </div>
            </div>
          </div>
        </div>
      </div>

      <!--
      <div class="c-width c-dis-flex-row c-hidden" style="height: 400px">
        <div class="c-flex c-dis-flex-row c-height c-hidden">
          <div class="c-flex c-dis-flex-col c-hidden d-cont-wrap">
            <div class="d-title"><span></span>进行中的课程</div>
            <div class="d-body">
              <el-table
                :data="tableData2"
                style="width: 100%" height="100%">
                <el-table-column prop="data1"  label="课程名称" :show-overflow-tooltip="true">
                  <template slot-scope="scope">
                    <span class="c-table-span-link">{{scope.row.data1}}</span>
                  </template>
                </el-table-column>
                <el-table-column prop="data2"  label="学习人数"  width="80" align="center"></el-table-column>
                <el-table-column prop="data3"  label="学完人数"  width="80" align="center"></el-table-column>
              </el-table>
            </div>
          </div>
          <div class="c-flex c-dis-flex-col c-hidden d-cont-wrap">
            <div class="d-title"><span></span>学习总览</div>
            <div class="d-body">
              <barCharts :chart-data="lineData2"></barCharts>
            </div>
          </div>
        </div>
      </div>
      -->
    </div>
  </div>
</template>

<script>
import  lineCharts from '@/views/dashboard/lineCharts.vue'
import  barCharts from '@/views/dashboard/barCharts.vue'
import  { getDateArray,randomArray} from '@/utils/common.js'
import { QueStatisticsOverview,QueNoticeList,QueOngoingExams,QueExamOverview} from "@/api/index/index";
export default {
  components:{
    lineCharts,
    barCharts
  },
  filters: {
    formatDate(time) {
      var date = new Date(time);
      var year=date.getFullYear();
      var month=date.getMonth()+1;
      var date=date.getDate();
      return   year+"-"+month+"-"+date
    }
  },
  data() {
    return {
      totalAll:[
        {name:"考试场数",value: 0},
        {name:"题库数量",value: 0},
        {name:"试题总数",value: 0},
      ],
      activityList:[
        {name:'创建考试',cont:'快速创建一场考试，支持多种选题方式',icon:'activity02',url:''},
        {name:'题库管理',cont:'批量导入、增加多种题型',icon:'activity04',url:''},
      ],
      //NoticeList 最多6条
      NoticeList:[
        {noticeTitle:'智慧考试培训系统更新说明：v1.0.0',createTime:'2023-10-20'},
      ],
      tableData1:[
      ],
      lineData1:{
        legend:['考试场数','考试人数','通过人数'],
        xAxis:[],
        series:[
        ]
      },
      tableData2:[
        {data1:'综合课程-包含视频课程及文档类课程',data2:0,data3:0},
      ],
      lineData2:{
        legend:['学习人数','学完人数'],
        xAxis:getDateArray(7),
        series:[
          randomArray(7),
          randomArray(7),
        ]
      }
    };
  },
  mounted() {

  },
  created() {
    //首页-统计总览，查询考试场数、题库数量、试题总数
    this.getStatisticsOverview();
    //首页-系统公告
    this.getNoticeList();
    //首页-进行中考试
    this.getOngoingExams();
    //首页-考试总览
    this.getExamOverview();
  },
  methods: {
    // 获取图片地址
    getImgUrl(img) {
      return require("@/assets/images/dash/" + img);
    },
    // 首页-统计总览，查询考试场数、题库数量、试题总数
    getStatisticsOverview() {
      QueStatisticsOverview().then((res) => {
        this.totalAll = res.data;
      }).catch(()=>{

      });
    },
    // 首页-系统公告
    getNoticeList() {
      QueNoticeList().then((res) => {
        if(res.code===200){
          this.NoticeList = res.rows;
        }
      }).catch(()=>{

      });
    },
    // 首页-进行中的考试
    getOngoingExams() {
      QueOngoingExams().then((res) => {
        this.tableData1 = res.data;
      }).catch(()=>{

      });
    },
    // 首页-考试总览
    getExamOverview() {
      QueExamOverview().then((res) => {
        this.lineData1.xAxis = res.data.xAxis;
        this.lineData1.series[0] = res.data.series0;
        this.lineData1.series[1] = res.data.series1;
        this.lineData1.series[2] = res.data.series2;
      }).catch(()=>{

      });
    },
    // 首页-快捷入口
    getActivityList(val) {
      if(val===0){
        this.$router.push({ path: '/practice/examination/list' });
      }else if(val===1){

      }else if(val===2){
        this.$router.push({ path: '/practice/question/list' });
      }
    },
  }
};
</script>

